<template>
	<view>
		<image class="top-img"
			src="https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/example/achievement.png"
			mode="widthFix"></image>
		<view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"
			@click.capture="toUserInfo">
			<view class="user-info__avatar tn-flex tn-flex-col-center tn-flex-row-center">
				<tn-avatar v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" size="lg" shape="circle"
					:src="userInfo.avatar_file.url"></tn-avatar>
				<tn-avatar text="头像" size="lg" shape="circle" v-else></tn-avatar>
			</view>
			<view class="user-info__nick-name tn-margin-left-sm tn-flex tn-flex-direction-column tn-flex-row-center">
				<text class="tn-color-grey--light tn-text-sm" v-if="hasLogin">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</text>
				<text class="tn-color-grey--light tn-text-sm" v-else>{{$t('mine.notLogged')}}</text>
				
				<view class="tn-flex tn-text-md tn-color-grey--light tn-flex-direction-row  tn-flex-row-center">
					已获得<text class="gard tn-margin-left-sm tn-margin-right-sm tn-text-xxl tn-color-gray--disabled">{{count}}</text>徽章
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
		name: 'achieve',
		computed: {
			userInfo() {
				return store.userInfo
			},
			hasLogin() {
				return store.hasLogin
			}
		},
		data() {
			return {
				count:0
			}
		},
		methods: {

		}
	}
</script>

<style>
	.user-info__container {
		position: absolute;
		top: 25px;
		left: 20px;
		display: flex;
		flex-direction: row;
		color: #666;
	}

	.top-img {
		width: 100%;
	}
</style>